<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-row class="right-imgs">
      <el-divider content-position="center">轮播设置</el-divider>
      <el-form>
        <switch-normal v-model="commonAttr.isOtherBtnTrigger" label="其他组件触发翻页" @change="onChangeAttr"></switch-normal>
        <dropdown-normal v-model="commonAttr.effect" :valLists="SWIPER_EFFCE" label="切换效果" :bIsBtn="false" @change="onChangeAttr"></dropdown-normal>
        <textarea-normal v-if="commonAttr.effect == SWIPER_EFFCE[3].value" label="特效参数" placeholder='{"rotate": 30,"stretch": 0,"depth": 80,"modifier": 1,"slideShadows": true}' v-model="commonAttr.effectParams" @change="onChangeAttr"></textarea-normal>
        <switch-normal v-model="commonAttr.isLoop" label="滑动循环" @change="onChangeAttr"></switch-normal>
        <dropdown-normal v-model="commonAttr.paginationType" :valLists="PAGINATION_TYPE" label="分页器类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <dropdown-normal v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.dot || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns" label="分页器颜色" :valLists="CAROUSEL_COLOR_TYPES" v-model="commonAttr.paginationColorType" @change="onChangeAttr"></dropdown-normal>
        <template v-if="commonAttr.paginationType == PAGINATION_TYPE_MAP.btns || commonAttr.paginationType == PAGINATION_TYPE_MAP.dotAndBtns">
          <p class="margin-left-right-16">翻页左按钮</p>
          <add-img-con :url="commonAttr.preBtnUrl" comAttr="commonAttr" picAttr="preBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>
          <p class="margin-left-right-16">翻页右按钮</p>
          <add-img-con :url="commonAttr.nextBtnUrl" comAttr="commonAttr" picAttr="nextBtnUrl" :height="100" :isCrop="false" class="margin-left-right-16"></add-img-con>   
          <input-normal label="翻页按钮宽度" v-model="commonAttr.swiperBtnWidth" @change="onChangeAttr"></input-normal>
          <input-normal label="翻页按钮高度" v-model="commonAttr.swiperBtnHeight" @change="onChangeAttr"></input-normal>
        </template>   
        <dropdown-normal v-model="commonAttr.carouselType" :valLists="CAROUSEL_TYPES" label="轮播类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <template v-if="commonAttr.carouselType == CAROUSEL_TYPES_MAP.slidesPerView">
          <input-normal label="显示多少个滑块" v-model="commonAttr.slideNum" @change="onChangeAttr"></input-normal>
          <input-normal label="滑块间距" v-model="commonAttr.slideSpace" @change="onChangeAttr"></input-normal>
          <switch-normal v-model="commonAttr.isFreeMode" label="自由模式" @change="onChangeAttr"></switch-normal>
        </template>
        <switch-normal v-model="commonAttr.autoTurnPage" label="自动翻页" @change="onChangeAttr"></switch-normal>
        <slider-normal v-if="commonAttr.autoTurnPage" v-model="commonAttr.turnPageTime" :min="0" :max="10" :step="1" label="翻页时间" @change="onChangeAttr"></slider-normal>
      </el-form>
      <div class="margin-left-right-16 margin-bottom-10 margin-top-10">
        <el-button icon="" @click.stop="onAddItem" type="primary">
          <el-icon><i class="jy-icon-plus"></i></el-icon>添加图片
        </el-button>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item, index) in lists" :key="'drag_' + index" :name="index+1" class="list-group-item">
          <template #title>
            第{{index+1}}屏图片<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
          </template>
          <add-img-con :url="item.url" :picAttr="'url'" :index="index" :isCrop='true' class="margin-left-right-16"></add-img-con>
          <el-form>
            <input-normal label="链接地址" v-model="item.link" @change="onUpdateItem(index)"></input-normal>
            <input-normal label="schema地址" v-model="item.schema" @change="onUpdateItem(index)"></input-normal>
            <input-normal label="图片名字" v-model="item.name" @change="onUpdateItem(index)"></input-normal>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-row>
  </right-template>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { COMPONENT_TYPES, CAROUSEL_TYPES_MAP, SWIPER_EFFCE, PAGINATION_TYPE, CAROUSEL_COLOR_TYPES, PAGINATION_TYPE_MAP, CAROUSEL_TYPES } from '@/const/'
import { ROTATE3D_LIST } from '@/const/web/'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'

const useWebComponent = useWebComponentStore()
let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
const pattern = computed(() => {
  if(useWebComponent.currentComponentData!.cid == COMPONENT_TYPES.wb_radio) {
    return true
  } else {
    return false
  }
})

const activeNames = [1]
const lists = computed(() => {
  return useWebComponent.currentComponentData!.lists
})
const onAddItem = () => {
  let item: IListItem
  if(componentData_.events.rotate3d) {
    item = _.cloneDeep(ROTATE3D_LIST[0])
  } else {
    item = _.cloneDeep(ComponentTypesDefaultDom[componentData_.cid].lists[0])
  }
  if(componentData_.lists && componentData_.lists[0]) {
    item = _.cloneDeep(componentData_.lists[0])
  }
  if(item){
    useWebComponent.addComponentItem(item)
  }
}
const onUpdateItem = (index: number) => {
  useWebComponent.updateComponentItem({ index, item: componentData_.lists[index] })
}
const onDeleteItem = (index: number) => {
  useWebComponent.deleteComponentItem({index})
}
</script>